@use '@scss/common' as *;

.highlightWrapper {
  text-decoration: none;
}

.label {
  transition: color cubic-bezier(0.4, 0, 0.2, 1) 500ms;
  transition-delay: 250ms;
  position: relative;
  z-index: 1;
  color: var(--theme-text);
}

.highlightNode {
  position: relative;
  display: inline-flex;
  will-change: color;

  &::before {
    pointer-events: none;
    will-change: width; // animating 'height' ftl, transform: translate3d requires overflow: hidden but there is no good way to achieve horizontal padding without visible overflow
    content: '';
    position: absolute;
    width: calc(100% + 0.33em);
    height: 0;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-color: var(--highlight-success-bg-color);
    transition: height cubic-bezier(0.4, 0, 0.2, 1) 500ms;
    transition-delay: 250ms;
  }
}

.danger {
  .highlightNode:before {
    background-color: var(--highlight-danger-bg-color);
  }

  .doHighlight {
    .label {
      color: var(--highlight-danger-text-color);
    }
  }
}

.doHighlight {
  .label {
    color: var(--highlight-success-text-color);
  }

  &::before {
    height: 50%;
  }
}
